<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/pear/component/pear/css/pear.css}"/>
</head>
<body>
<form class="layui-form" method="POST" action="" id="layui-form" autocomplete="off">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item ">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-block">
                    <div id="ID-tree-demo-showCheckbox"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="text-align: center;">
        <button type="button" class="pear-btn pear-btn-primary" id="btn-confirm">确认部署</button>
        <button type="button" class="pear-btn" id="btn-cancel">取消</button>
    </div>
</form>
<script th:src="@{/pear/component/layui/layui.js}"></script>
<script th:src="@{/pear/component/pear/pear.js}"></script>
<script th:src="@{/pear/component/layui/authtree.js}"></script>
<script th:inline="javascript">
    let baseURL = /*[[@{/}]]*/ '';
    layui.use(['table', 'layer', 'jquery', 'authtree'], function () {
        let authtree = layui.authtree;
        const layer = layui.layer;
        const $ = layui.jquery;
        let parentId = [];
        // 渲染
        $.ajax({
            url: baseURL + "department/list",
            type: 'get',
            success: function (res) {
                let trees = authtree.listConvert(res.data, {
                    primaryKey: 'departmentId'
                    , startPid: 0
                    , parentKey: 'parentId'
                    , nameKey: 'departmentName'
                    , valueKey: 'departmentId'
                    , checkedKey: res.data.departmentId
                });

                authtree.render('#ID-tree-demo-showCheckbox', trees, {
                    autoWidth: true,
                    openChecked: true,
                    autochecked: false,
                    autoclose: false
                });
                authtree.on('change(#ID-tree-demo-showCheckbox)', function () {
                    // 获取选中节点
                    parentId = authtree.getChecked('#ID-tree-demo-showCheckbox');
                });

            }
        })
        // 2. 确认部署
        $('#btn-confirm').on('click', function () {
            if (!parentId || parentId.length === 0) {
                layer.msg('请选择至少一个部门', {icon: 2});
                return;
            }
            $.ajax({
                url: baseURL + 'workflow/flowable/saveBpmn',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({bpmnXml: parent.bpmnXml, name: parent.name, deptId: parentId}),
                success: function (res) {
                    if (res.code === 1000) {
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 1000
                        }, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                            parent.parent.layui.table.reload("processDefinitionTable");
                        });
                    } else {
                        layer.msg(res.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                },
                error: function () {
                    layer.close(loading);
                    layer.msg('请求失败，请稍后再试', {
                        icon: 2,
                        time: 1000
                    });
                }
            });
        });

        // 3. 取消
        $('#btn-cancel').on('click', function () {
            const index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
    })
</script>
</body>
</html>